import React, {Component} from "react";
import {
	View,
	Text,
	Image,
	TouchableOpacity,
	StatusBar,
	StyleSheet,
	ScrollView,
} from "react-native";
import Icon from 'react-native-vector-icons/FontAwesome';
import {observer} from "mobx-react/native";

import User from "../../models/User";
import styles from "../style";

const personInfoList = [
	{key: 1, title: "我的健康档案", nav: "healthRecord"},
	{key: 2, title: "我的钱包", nav: "myWallet"},
	{key: 3, title: "注册邀请码", nav: "registerCode"},
	{key: 4, title: "设置", nav: "healthEdu"},
]

const storeOptionsList = [
	{key: 5, title: "我的产品方案", nav: "healthEdu"},
	{key: 6, title: "我的订单", nav: "healthEdu"},
]

@observer
export default class ShoppingMall extends Component {
	static navigationOptions = {
		header: null,
		tabBarLabel: "我的",
		tabBarIcon: ({tintColor}) => (
			<Image 
				source={require('../../images/mine.png')}
				style={[{tintColor: tintColor}, styles.iconImage]}
			/>
		)
	}
	constructor(props) {
		super(props);
	}
	//循环展示列表；
	renderPersonInfoList = (optionsLists) => {
		const {isFetching} = User.list;
		const {navigate} = this.props.navigation;
		const personInfoLists = optionsLists.map(infoList => 
				<TouchableOpacity key={infoList.key} style={perStyles.list} onPress={() => { isFetching ? navigate(`${infoList.nav}`) : navigate('login') }}>
					<Text style={perStyles.listText}>{infoList.title}</Text>
					<Icon name="chevron-right" size={18} color={gColor.chevronColor} />
				</TouchableOpacity>
		);
		return personInfoLists;
	}
	render() {
		const {isFetching} = User.list;
		const {navigate} = this.props.navigation;
		return (
			<View>
				<StatusBar 
					barStyle="light-content"
				/>
				<View style={perStyles.perHeader}>
					<TouchableOpacity style={perStyles.perHeaderLogin} onPress={() => navigate("login")}>
						<Image style={perStyles.perImg} source={require("../../images/me.jpg")} />
						<Text style={perStyles.headertext}>
							{ isFetching ? "张三" : "登录/注册" }
						</Text>
					</TouchableOpacity>
				</View>
				<ScrollView>
					<View style={perStyles.containerListBg}>
						<Text style={perStyles.listTitle}>我的信息</Text>
						{this.renderPersonInfoList(personInfoList)}
					</View>
					<View style={[perStyles.containerListBg, {marginTop: 10}]}>
						<Text style={perStyles.listTitle}>我的商城</Text>
						{this.renderPersonInfoList(storeOptionsList)}
					</View>
				</ScrollView>
			</View>
		);
	}
}

const perStyles = StyleSheet.create({
	headertext: {
		color: gColor.bgColor2,
	},
	perHeader: {
		paddingTop: 62,
		paddingBottom: 40,
		paddingLeft: 20,
		backgroundColor: "rgba(232, 16, 13, .8)",

	},
	perHeaderLogin: {
		flexDirection: "row",
		alignItems: "center",
	},
	perImg: {
		width: 45,
		height: 45,
		borderRadius: 22.5,
		marginRight: 10,
	},
	list: {
		flexDirection: "row",
		alignItems: "center",
		justifyContent: "space-between",
		padding: 10,
		borderBottomWidth: 1,
		borderBottomColor: gColor.borderColor2,
	},
	containerListBg: {
		backgroundColor: gColor.bgColor2,
	},
	listTitle: {
		borderBottomWidth: 1,
		padding: 10,
		borderBottomColor: gColor.borderColor2,
		fontSize: 13,
	},
	listText: {
		color: gColor.fontColor2,
	},

})